<template>
	<div class="CategoryTab1_three swiper">
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
			<li v-for="(list,index) in pages" :key="index" class="swiper-slide">
				<router-link to="" v-for="item in list" :key="item.id">
					<p>
						<img :src="item.imgURL"/>
					</p>
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}起</p>
					</aside>
				</router-link>
			</li>
		</ol>
	</div>
</template>

<script>
	// 1引入vue周期函数
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'CategoryTab1_three',
		data(){
				return{
					tab1List : [
						{id:1,imgURL:'gtimg/1.jpg',title:'恭城+海洋乡',msg:'广州出发 | 2天',price:450},
						{id:2,imgURL:'gtimg/2.jpg',title:'仰天湖+小东江',msg:'广州出发 | 2~3天',price:880},
						{id:3,imgURL:'gtimg/3.jpg',title:'华南之巅',msg:'广州/桂林.. | 2天',price:760},
						{id:4,imgURL:'gtimg/4.jpg',title:'徒步黔东南3日',msg:'广州出发 | 3天',price:1299},
						{id:5,imgURL:'gtimg/5.jpg',title:'民俗黔东南',msg:'广州出发 | 3天',price:1788},
						{id:6,imgURL:'gtimg/6.jpg',title:'徒步莫东南3日',msg:'广州出发 | 3天',price:1299},
						{id:7,imgURL:'gtimg/7.jpg',title:'黄姚私家游',msg:'广州出发 | 2天',price:480},
						{id:8,imgURL:'gtimg/8.jpg',title:'大陆之南',msg:'广州/湛江 | 3天',price:1110},
						{id:9,imgURL:'gtimg/9.jpg',title:'探秘黔南3日',msg:'广州出发 | 3天',price:1480},
					],
				}
			},
			computed:{
				//程序将其当成是属性不是函数，是个变量[循环/判断]
				pages(){
					let arr=[];//空数组，目的是：重组一个二维数组
					let num =6  //每页条数
					//将原数组便历
					this.tab1List.forEach((item,index)=>{
						//每页的页码
						let i=Math.floor(index/num);
						//将计算的页码放入新数组内，作为下标：
						//判断改下标是否已存在
						if(!arr[i]){
							arr[i]=[];
							arr[i].push(item);
							
						}else{
							//已经出现过直接添加
							arr[i].push(item);
						}
						
						// if(!arr[i])    arr[i]=[];
						// arr[i].push(item);
					})
					return arr;
				}
			},
			setup(){
				onMounted ( ()=> {
					new Swiper('.CategoryTab1_three',{
						
					})
				})
			},
	}
</script>

<style scoped>
	.CategoryTab1_three{
		width: 100%;
		height: 25rem;
	}
	.CategoryTab1_three li{
		width: 100%;
		
	}
	.CategoryTab1_three a{
		text-align: center;
		float: left;
		width: 33%;
		height: 27%;
		text-decoration: none;
		color: black;
		line-height: 1rem;
		position: relative;
	}
	.CategoryTab1_three a img{
		margin-top: 0.5rem;
		width: 95%;
		border-radius: 0.3rem;
		
	}
	
	.CategoryTab1_three a h3{
		margin: 0 auto;
		width: 90%;
		text-align: left;
		font-size: 0.5rem;
		font-weight: bolder;
		line-height: 2rem;
		text-indent: 1rem;
	}
	.CategoryTab1_three a label{
		width: 6rem;
		margin-left: 0.5rem;
		position: absolute;
		top: 0.5rem;
		right:0.2rem;
		background-color: rgba(0,0,0,0.6);
		display: block;
		text-align: center;
		color: white;
		border-radius: 0 0.4rem 0 0.4rem;
		font-size: 0.5rem;
		display: -webkit-box;
		-webkit-line-clamp: 1;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
	}
	.CategoryTab1_three a aside p{
		text-align: left;
		text-indent: 0.2rem;
		color: white;
		font-weight: bolder;
		font-size: 0.4rem;
		position: absolute;
		bottom: 2rem;
	}
	
	/* 穿透*/
	.swiper-tion  :deep(.swiper-pagination-bullet-active){
		background-color: white;
	}
</style>
